<template>
  <div class="myUpdateEmail">
    <!-- 头部导航 -->
    <myheader title="修改邮箱" rightBtn="确定修改" @updataInfo="updatePwd"></myheader>

    <my-input>
      <template v-slot:myinput_title>
        <van-icon name="envelop-o" style="color: rgb(57, 169, 237); font-size: 25px;" />旧邮箱：
      </template>
      <template v-slot:myinput_input>
        <el-input placeholder="旧邮箱" v-model="oldEmail " :disabled="true"></el-input>
      </template>
    </my-input>

    <my-input>
      <template v-slot:myinput_title>
        <van-icon name="envelop-o" style="color: rgb(57, 169, 237); font-size: 25px;" />新邮箱：
      </template>
      <template v-slot:myinput_input>
        <el-input placeholder="请输入新邮箱" v-model="newEmail "></el-input>
      </template>
    </my-input>

    <my-input>
      <template v-slot:myinput_title>
        <svg
          t="1630720084212"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="13597"
          width="200"
          height="200"
        >
          <path
            d="M811.739429 435.2c45.153524 0 81.773714 34.377143 81.773714 76.8v358.4c0 42.422857-36.62019 76.8-81.773714 76.8H212.260571c-45.153524 0-81.773714-34.377143-81.773714-76.8V512c0-42.422857 36.62019-76.8 81.773714-76.8h599.478858m0-76.8H212.260571C121.904762 358.4 48.761905 427.154286 48.761905 512v358.4C48.761905 955.245714 121.953524 1024 212.260571 1024h599.478858C902.095238 1024 975.238095 955.245714 975.238095 870.4V512c0-84.845714-73.191619-153.6-163.498666-153.6zM512 76.8c105.325714 0 190.756571 80.213333 190.756571 179.2v102.4H321.243429v-102.4c0-98.986667 85.430857-179.2 190.756571-179.2M512 0C361.520762 0 239.518476 114.590476 239.518476 256v179.2h544.963048V256C784.481524 114.590476 662.479238 0 512 0h-0.097524 0.097524z m0 806.424381c-22.576762 0-40.862476-17.212952-40.862476-38.424381V614.4c-0.828952-21.211429 16.774095-39.009524 39.350857-39.789714 22.528-0.78019 41.496381 15.798857 42.325333 36.961524V768c0 21.211429-18.285714 38.424381-40.862476 38.424381H512z"
            fill="#bfbfbf"
            p-id="13598"
          />
        </svg>
        验证码：
      </template>
      <template v-slot:myinput_input>
        <el-input placeholder="请输入验证码" v-model="code "></el-input>
      </template>
    </my-input>

    <li class="register_getuser" @click="getCode">获取验证码</li>
  </div>
</template>

<script>
import { Notify } from 'vant'
import myInput from '../../comon/myInput.vue' //我的信息插槽
import myheader from '../../comon/myheader.vue' //头文件
import { isEmail } from '../../utils/tools'
export default {
  components: {
    myheader,
    myInput,
  },
  data() {
    return {
      oldEmail: this.$route.params.oldEmail,
      newEmail: '',
      code: '',
      token: '',
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    // 修改邮箱前先进行密码验证
    async getCode() {
      let newEmail = this.newEmail
      if (isEmail(this.newEmail)) {
        const res = await this.$axios.get('/sys/user/email', {
          params: {
            email: newEmail,
          },
        })
        if (res.data.code == 200) {
          this.token = res.data.data.token
          return true
        } else {
          return false
        }
      }
    },
    async updatePwd() {
      // 获取验证码成功
      if (this.getCode) {
        // 验证邮箱格式
        if (isEmail(this.newEmail)) {
          const res = await this.$axios.post('/sys/user/modifyEmail', {
            id: this.$store.getters.getUserInfo.id,
            email: this.newEmail,
            code: this.code,
            token: this.token,
          })
          if (res.data.code == 200) {
            // 更新信息
            this.$store.commit('SET_USER', res.data.data)
            // 跳转到个人信息页面
            this.$router.push('/myinfo')
            Notify({ type: 'success', message: '更改信息成功' })
          }
        }
      }
      // 邮箱格式验证
    },
    getUserInfo() {
      this.$axios.get('/sys/userInfo').then((res) => {
        this.$store.commit('SET_USER', res.data.data)
      })
    },
  },
}
</script>

<style scoped>
.myUpdateEmail {
  margin-top: 46px;
}
.myinput_title {
  width: 27% !important;
  font-size: 0.42667rem;
  margin: auto;
  text-align: justify;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
}
.register_getuser {
  width: 60%;
  height: 40px;
  font-size: 18px;
  background: #07c160;
  margin: 20px 20% 10px 20%;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
</style>
